import { defineComponent } from "vue";
import style from "./index.module.less";
import GoodsListItem from "../GoodsListItem";
import Text from "../Text";
import RowView from "../RowView";
import Label from "../Label";
import { BrandedGoodsProps } from "./types";
import { Divider } from "vant";
import TextGroups from "../TextGroups";
import ButtonGroupView from "../ButtonGroupView";
import { IButtonGroupViewData } from "../ButtonGroupView/types";
import TitleView from "../TitleView";
export default defineComponent({
  name: "",
  props: BrandedGoodsProps,
  setup(_) {
    return () => {
      // 小户样式
      const renderRightBody = () => {
        return (
          <div class="flex flex-col justify-between flex-1">
            <TitleView title={_.itemData.name} />
            <Text>{_.itemData.introduce}</Text>
            <RowView class="justify-between my-[10px]">
              <Label
                class="!w-[140px]"
                name={_.itemData.majorName + "类别可使用"}
                type="yellow"
              ></Label>
              <span class="blue-text">{_.itemData.useNum}人使用</span>
            </RowView>
            <Text>{_.itemData.address}</Text>
          </div>
        );
      };
      // 大户样式
      const renderRightDHBody = () => {
        const data = [
          {
            name: "主营业务",
            value: _.itemData.produceTypeName,
          },
          {
            name: "包装类型",
            value: _.itemData.packTypeName,
          },
          {
            name: "需求数量",
            value: _.itemData.applyNum,
          },
        ];
        const buttons: IButtonGroupViewData[] = [
          {
            text: "拒绝",
            type: "primary",
            plain: true,
          },
          {
            text: "同意使用",
            type: "primary",
            childClass: "!h-[30px]",
          },
        ];
        return (
          <div class="flex flex-col">
            <TextGroups data={data} itemWidth="100%" class="mt-[10px]" />
            <div class="w-[180px] mt-[8px]">
              <ButtonGroupView data={buttons} childClass="!h-[30px]" />
            </div>
          </div>
        );
      };
      return (
        <div>
          <GoodsListItem
            // 小户样式
            // class="branded-goods-item"
            // 大户样式
            class={[
              _.type == "dh" ? "branded-dh-goods-item" : "branded-goods-item",
            ]}
            {..._}
            img={_.img || _.itemData.logoUrl}
            v-slots={{
              // 小户样式
              // rightBody: renderRightBody,
              // 大户样式
              rightBody: _.type == "dh" ? renderRightDHBody : renderRightBody,
            }}
          />
          <Divider></Divider>
        </div>
      );
    };
  },
});
